<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防抖节流</title>
</head>
<body>
    <input type="text" name="" id="int" class="int">
    <div class="divd">11</div>
    <button id="button">点击</button>

    <script>
        let divText = document.querySelectorAll('.divd')[0]
        let inputText = document.getElementById('int')
        

        console.log(divText)
        // 防抖函数
        function debounce(delay,callback){
            let timer;
            return function(value){
                clearTimeout(timer)
                timer = setTimeout(() => {
                    callback(value)
                }, delay);
            }
        }

        function fn(value){
            console.log(value)
            divText.innerText += value
        }

        let debounceFun = debounce(1000,(value)=>{
            console.log(value)
            divText.innerText += value
        })
        
        inputText.addEventListener('keyup',(e)=>{
            debounceFun(e.target.value)
        })

        // 节流函数
        function throttle(callback,wait){
            let timeOut;

            return function(){
                if(!timeOut){
                    timeOut = setTimeout(() => {
                        callback()
                        timeOut = null
                    }, wait);
                }
            }
        }


        document.getElementById('button').onclick = throttle(()=>{
            console.log('节流')
        },2000)
    </script>
</body>

</html>